<template>
	<view v-if="accumulateShowSatus" class="st-product-accumulate">
		<view class="accumulate-block" @click="showPopup">
			<view class="accumulate-block__bd">
				<view class="label" v-if="hasGetAccumulate"><text class="iconfont" >&#xe67b;</text>获赠积分</view>
				<view class="label" v-if="hasDeductAccumulate"><text class="iconfont" >&#xe67b;</text>积分抵扣</view>
			</view>
			<view class="accumulate-block__fd"><text class="icon-right iconfont">&#xe67f;</text></view>
		</view>
		<uni-popup ref="popupAccumulate" type="bottom">
			<view class="accumulate-popup">
				<view class="accumulate-popup__header">
					<view class="title">积分优惠</view>	
					<view class="close" @click="closePopup"><text class="iconfont">&#xe61a;</text></view>
				</view>
				<view class="accumulate-popup__body">
					<view v-if="hasDeductAccumulate" style="margin-bottom: 20rpx">
						<view class="title">积分抵扣</view>
						<view class="content">
							购买该产品可使用积分抵现<text class="discount">({{jifentprice_info.toplimit}}积分抵{{jifentprice_info.jifentprice}}元)</text>
						</view>
					</view>	
					<view v-if="hasGetAccumulate">
						<view class="title">获赠积分</view>
						<view v-if="jifenbook_info.isopen == 1 && jifenbook_info.value" class="content">
							购买该产品可获得<text class="discount"><block v-if="jifenbook_info.rewardway == 1">订单总额{{jifenbook_info.value}}%的</block><block v-else>{{jifenbook_info.value}}</block>积分</text>
						</view>
						<view v-if="jifencomment_info.isopen == 1 && jifencomment_info.value" class="content">
							评论该产品可获得<text class="discount"><block v-if="jifencomment_info.rewardway == 1">订单总额{{jifencomment_info.value}}%的</block><block v-else>{{jifencomment_info.value}}</block>积分</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	/**
	 * 产品积分信息展示
	 * @description 产品预订赠送积分、抵扣积分、评论送积分说明
	 * @property {Object} jifentprice_info   积分抵扣
	 * @property {Object} jifenbook_info     预订赠送积分
	 * @property {Object} jifencomment_info  评论赠送积分
	 */
	export default {
		name: 'stProductIntegral',
		props: {
			jifentprice_info: {
				type:  [Object,Boolean],
				default () {
					return {}
				}
			},
			jifenbook_info: {
				type: [Object,Boolean],
				default () {
					return {}
				}
			},
			jifencomment_info: {
				type: [Object,Boolean],
				default () {
					return {}
				}
			}
		},
		data() {
			return {

			};
		},
		computed: {
			// 是否展示积分信息
			accumulateShowSatus(){
				return (this.jifentprice_info.isopen == 1 || this.jifenbook_info.isopen == 1 || this.jifencomment_info.isopen == 1)
			},
			
			// 赠送积分展示
			hasGetAccumulate(){
				return (this.jifenbook_info.isopen == 1 || this.jifencomment_info.isopen == 1)
			},
			
			// 抵扣积分展示
			hasDeductAccumulate(){
				return (this.jifentprice_info.id && this.jifentprice_info.isopen == 1)
			}
		},
		methods: {
			showPopup() {
				this.$refs.popupAccumulate.open()
			},
			// 关闭弹层
			closePopup(){
				this.$refs.popupAccumulate.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.st-product-accumulate {
		background: linear-gradient(to top, #F4FFF7 1%, rgba(247,255,249,0) 100%);
		border-radius:0 0 20rpx 20rpx;
		.accumulate-block{
			@include justifyspacec;
			padding: 18rpx 24rpx;
			&__bd{
				@include justifyspacec;
				.label{
					color: #666;
					height: 36rpx;
					line-height: 36rpx;
					margin-right: 40rpx;
					font-size: 22rpx;
					.iconfont{
						color: #2DBB55;
						display: inline-block;
						vertical-align: middle;
						margin: -6rpx 4rpx 0 0;
					}
				}
			}
			&__fd{
				.iconfont{
					color: #a0a0a0;
					font-size: 32rpx
				}
			}
		}
		
	}
	
	// 积分显示样式
	.accumulate-popup{
		border-radius: 20rpx;
		background: #fff;
		height: 60vh;
		&__header{
			padding: 24rpx;
			@include justifyspacec;
			.tit{
				font-size: 32rpx;
				font-weight: bold;
			}
			.close{
				.iconfont{
					color: #ccc;
					font-size: 40rpx
				}
			}
		}
		&__body{
			padding: $uni-spacing-row-base;
			.title{
				font-size: $uni-font-size-base;
				color: $uni-text-color;
				padding: 8rpx 0;
			}
			.content{
				font-size: $uni-font-size-sm;
				color: $uni-text-color-deep;
				padding: 4rpx 0;
				.discount{
					color: #FF4A50;
				}
			}
		}
	}
</style>
